<template>
  <el-upload
      class="avatar-uploader"
      :auto-upload="false"
      action="#"
      :show-file-list="false"
      :on-change="OnHandleChange"
  >
    <el-avatar
        :src="imgurl"
    ></el-avatar>
  </el-upload>
</template>

<script>
import {ElLoading, ElMessage} from "element-plus";
import ObsClient from 'esdk-obs-browserjs'
var obsClient
export default {
  props: {
    modelValue: String,
  },
  data(){
    return{
      imgurl:""
    }
  },
  created() {
    console.log(this.modelValue)
    if(this.modelValue){
      this.imgurl = this.modelValue
    }
    console.log(this.imgurl)
    obsClient = new ObsClient({
      access_key_id: "7MHNBAYEIXMXXR0NSEMV",
      secret_access_key: "C3DKdIgRuWOAZfj0CN6QKmRTPtcdNaMVRFFVDlpe",
      server: "obs.cn-south-1.myhuaweicloud.com",
      timeout: 60 * 5,
    });
  },
  methods:{
    OnHandleChange(file){
      let loading = ElLoading.service({
        lock: true,
        text: '上传中....',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      // const isJPG = file.raw.type === 'image/jpeg'
      // const isLt2M = file.size / 1024 / 1024 < 2
      // if (!isJPG) {
      //   loading.close()
      //   ElMessage.error('Avatar picture must be JPG format!')
      //   return
      // }
      // if (!isLt2M) {
      //   loading.close()
      //   ElMessage.error('Avatar picture size can not exceed 2MB!')
      //   return
      // }

      let imgName = `guess/${file.name}`;
      obsClient.putObject({
        Bucket: "meimei",
        Key: imgName, //随机十位数字符串,
        Metadata: {property: "property-value"},
        SourceFile: file.raw,
        ContentType: 'text/plain',
      }).then(() => {
        loading.close()
        this.imgurl = `https://img.feetbook.cn/${imgName}`
        this.$emit('update:modelValue', `https://img.feetbook.cn/${imgName}`)
        // this.$emit('changeImgUrl', `https://img.feetbook.cn/${imgName}`)
        ElMessage.success("上传完毕")
      }).catch(function (err) {
        loading.close()
        ElMessage.error(err)
      });
    },

  }

}
</script>

<style scoped>

</style>